<template>
	<view class="container">
	    <view class="box">获取这个盒子的宽高、位置等信息</view>
		
		<view class="box">6666</view>
	  </view>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';

	onMounted(()=>{
		// 1.创建一个节点信息
		const selectorQuery = uni.createSelectorQuery()
		// console.log(selectorQuery)
		// 2.调用实例方法查询节点信息
		selectorQuery.select('.box').boundingClientRect((res) => {
		      console.log(res);
		})
		selectorQuery.selectAll('.box').boundingClientRect((rects) => {
		      // 获取宽高和位置
		      console.log(rects)
		})
		
		    selectorQuery.selectViewport().boundingClientRect((rect) => {
		      console.log(rect)
		})
		// 结束查询
		selectorQuery.exec()
	})
</script>

<style lang="scss">
  page {
    padding: 30rpx;
  }

  .box {
    width: 300rpx;
    height: 300rpx;
    margin-top: 40rpx;
    background-color: pink;
  }
</style>
